<script setup>
    import { onMounted } from 'vue'
    import positionIcon1 from '../../../assets/images/travel_1.png'
    import mapImg from '../../../assets/images/xz-map-img.png'

    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })

    const emit = defineEmits(['showVillageInfo'])

    // 创建Map实例
    let map = undefined

    // 徐庄坐标
    let xzPosition = [117.591789,35.0625482]
    
    let positionIcon = [positionIcon1]

    onMounted(() => {
        map = new BMapGL.Map('container');
        map.centerAndZoom(new BMapGL.Point(117.591789,35.0625482), 14);
        map.enableScrollWheelZoom(true);
        map.setTilt(70);
        map.setDisplayOptions({
            // poiText: false,  // 隐藏poi标注
            // poiIcon: false,  // 隐藏poi图标
            building: false  // 隐藏楼块
        });


        var pStart = new BMapGL.Point(117.48880112, 35.01565746);
        var pEnd = new BMapGL.Point(117.67297268, 35.17716034);
        var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
        var imgOverlay = new BMapGL.GroundOverlay(bounds, {
            type: 'image',
            url: mapImg,
            opacity: 10
        });
        map.addOverlay(imgOverlay);
        console.log(map)

        setTimeout(() => {
            init(props.list)
            
        }, 2000);

    })

    let resData = $ref([])


    const init = (data) => {
        resData = data

        let arr = []

        if(resData.length){
            arr = resData.map((item) => {
                if(!item.position) return []
                return [item.position.split(',')[0], item.position.split(',')[1]]
            })
        }
        // let arr = [[117.591789,35.0625482]]


        // 初始化地图,设置中心点坐标和地图级别。

        for(let i = 0; i < arr.length; i++){
            // 创建Marker标注，使用图标
            if(!arr[i]) return 

            var myIcon = new BMapGL.Icon(positionIcon[0], new BMapGL.Size(39, 54));


            var pt = new BMapGL.Point(arr[i][0], arr[i][1]);
            var marker = new BMapGL.Marker(pt, {
                icon: myIcon
            });
            // 创建文本标注对象
            var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                // offset: new BMapGL.Size(0, -60), // 设置文本偏移量
            };
            var label = new BMapGL.Label(resData[i].sysOrgCode_dictText, labelopts);
            label.setStyle({ 
                color : "#fff", 
                fontSize : "14px", 
                backgroundColor:"rgba(0,0,0,0.6)",
                border :"2px", 
                padding: '5px 10px',
                transform: 'translateX(-50%)',
                cursor: 'pointer'
            });
            
            map.addOverlay(label);
            // map.addOverlay(marker)

            // 鼠标点击坐标
            label.addEventListener('click', function (e) {
                emit('showVillageInfo', resData[i].sysOrgCode, i)
            })
        }
    }

</script>

<template>
    <div class="agriculture-map-wrap">
        <div id="container"></div>
    </div>
</template>

<style lang="less" scoped>
    .agriculture-map-wrap{
        width: 100%;
        height: 100%;
        // background: #fff;

        #container{
            width: 100%;
            height: 100%;
        }
    }
</style>